<template>
  <div class="settings-container">
    <h2 class="settings-title">系统设置</h2>
    <div class="settings-section">
      <h3>主题切换</h3>
      <div class="theme-toggle">
        <button :class="{active: theme==='light'}" @click="setTheme('light')">浅色模式</button>
        <button :class="{active: theme==='dark'}" @click="setTheme('dark')">深色模式</button>
      </div>
    </div>
    <div class="settings-section">
      <h3>语言选择</h3>
      <div class="lang-toggle">
        <button :class="{active: lang==='zh'}" @click="setLang('zh')">中文</button>
        <button :class="{active: lang==='en'}" @click="setLang('en')">English</button>
      </div>
    </div>
    <div class="settings-section">
      <h3>消息通知</h3>
      <label class="switch">
        <input type="checkbox" v-model="notify" />
        <span class="slider"></span>
        <span class="switch-label">{{ notify ? '已开启' : '已关闭' }}</span>
      </label>
    </div>
    <div class="settings-section">
      <h3>账户安全</h3>
      <div class="account-info">
        <p>用户名：实训测试</p>
        <button class="account-btn" @click="changePassword">修改密码</button>
      </div>
    </div>
    <div class="settings-section">
      <h3>关于系统</h3>
      <ul>
        <li>版本：1.0</li>
        <li>开发团队：实训小组</li>
        <li>联系方式：qfengl9934@163.com</li>
      </ul>
    </div>
    <div class="settings-section" style="text-align:center;">
      <button class="logout-btn" @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const theme = ref('light')
const lang = ref('zh')
const notify = ref(true)
function setTheme(val) {
  theme.value = val
  document.documentElement.setAttribute('data-theme', val)
}
function setLang(val) {
  lang.value = val
  // 可扩展：全局语言切换逻辑
}
function changePassword() {
  alert('跳转到密码修改页面（占位）')
}
function logout() {
  alert('已退出登录（占位）')
}
</script>

<style scoped>
.settings-container {
  max-width: 600px;
  margin: 2.5rem auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 2.5rem 2rem 2rem 2rem;
}
.settings-title {
  text-align: center;
  color: #1a2a6c;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
}
.settings-section {
  margin-bottom: 2.2rem;
}
.settings-section h3 {
  color: #4361ee;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.theme-toggle, .lang-toggle {
  display: flex;
  gap: 1.2rem;
}
.theme-toggle button, .lang-toggle button {
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  border: 1px solid #4361ee;
  background: #f7f9fc;
  color: #4361ee;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.theme-toggle button.active, .theme-toggle button:hover,
.lang-toggle button.active, .lang-toggle button:hover {
  background: #4361ee;
  color: #fff;
}
.switch {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.switch input {
  display: none;
}
.slider {
  width: 40px;
  height: 22px;
  background: #e4e7ed;
  border-radius: 22px;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
}
.switch input:checked + .slider {
  background: #4361ee;
}
.slider:before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.switch input:checked + .slider:before {
  transform: translateX(18px);
}
.switch-label {
  color: #4a6491;
  font-size: 1rem;
}
.account-info {
  background: #f8fafc;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  color: #4a6491;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.account-btn {
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #4361ee;
  background: #fff;
  color: #4361ee;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.account-btn:hover {
  background: #4361ee;
  color: #fff;
}
.logout-btn {
  padding: 0.7rem 2.2rem;
  border-radius: 8px;
  border: none;
  background: #f56c6c;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.logout-btn:hover {
  background: #dc2626;
}
.settings-section ul {
  padding-left: 1.2rem;
  color: #4a6491;
  font-size: 1rem;
}
</style> 